<template>
  <ga-spin :loading="loading" style="width: 100%">
    <div class="hardware_index">
      <baseinfo :info="hardwareInfo" :deviceInfo="deviceInfo" />
      <machineRoomInfo :info="hardwareInfo" :serverLog="serverLog" />
      <div class="flex">
        <machineConfig :deviceInfo="deviceInfo" />
        <auditlog :auditLog="auditLog" />
      </div>
    </div>
  </ga-spin>
</template>

<script setup>
import { ref, onMounted } from "vue";
import baseinfo from "./baseinfo.vue";
import machineRoomInfo from "./machineRoomInfo.vue";
import machineConfig from "./machineConfig.vue";
import auditlog from "./auditlog.vue";
import {
  getHardwareInfo,
  getDeviceInfo,
  getServerLog,
  getchangeLog,
} from "@/api/hostMgmt";
import useLoading from "@/hooks/loading";

const { loading, setLoading } = useLoading(true);
const props = defineProps({ id: String });
const hardwareInfo = ref({});
const deviceInfo = ref({});
const auditLog = ref([]);
const serverLog = ref([]);
onMounted(() => {
  setLoading(true);
  getHardwareInfo(props?.id).then((res) => {
    if (res.code === 20000) hardwareInfo.value = res?.data || {};
  });
  getDeviceInfo(props?.id).then((res) => {
    if (res.code === 20000) deviceInfo.value = res?.data || {};
  });
  getServerLog(props?.id, { page: 1, limit: -1 }).then((res) => {
    if (res.code === 20000) serverLog.value = res?.data?.items || [];
    setLoading(false);
  });
  getchangeLog(props?.id, { page: 1, limit: -1 }).then((res) => {
    if (res.code === 20000) auditLog.value = res?.data?.items || [];
    // console.log("res", auditLog.value);
  });
});
</script>

<style lang="scss" scoped>
.hardware_index {
  padding: 0 16px 16px;
}
</style>
